import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Rate } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function MerchantReply() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const businessNameRef = useRef<HTMLDivElement>(null);
  const commentTypeRef = useRef<HTMLDivElement>(null);
  const ratingRef = useRef<HTMLDivElement>(null);
  const replyStyleRef = useRef<HTMLDivElement>(null);
  const commentContentRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'businessName',
      title: '输入商家名称',
      description: '请输入您的商家名称，这将用于生成个性化的回复内容',
    },
    {
      key: 'commentType',
      title: '选择评价类型',
      description: '选择用户评价的类型，如好评、中评、差评或咨询',
    },
    {
      key: 'rating',
      title: '设置评分',
      description: '为评价设置评分，这将影响生成的回复内容风格',
    },
    {
      key: 'replyStyle',
      title: '选择回复风格',
      description: '选择您希望的回复风格，如热情友好、专业诚恳等',
    },
    {
      key: 'commentContent',
      title: '输入评价内容（可选）',
      description: '输入用户的具体评价内容，以便生成更精准的回复',
    },
    {
      key: 'generateButton',
      title: '生成商家回复',
      description: '完成所有设置后，点击此按钮生成商家回复',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的回复内容',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    businessName: businessNameRef,
    commentType: commentTypeRef,
    rating: ratingRef,
    replyStyle: replyStyleRef,
    commentContent: commentContentRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成商家回复的模拟函数
  const generateContent = (
    commentContent: string,
    commentType: string,
    rating: number,
    businessName: string,
    replyStyle: string,
    specialRequirements: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 开头问候
    if (replyStyle === '热情友好') {
      result += `${Math.random() > 0.5 ? '亲爱的顾客，您好！' : '尊敬的顾客，感谢您的光临！'}\n\n`;
    } else if (replyStyle === '专业诚恳') {
      result += `${Math.random() > 0.5 ? '尊敬的顾客：' : '亲爱的顾客：'}\n\n`;
    } else if (replyStyle === '简洁礼貌') {
      result += `${Math.random() > 0.5 ? '您好！' : '感谢您的反馈！'}\n\n`;
    } else if (replyStyle === '幽默风趣') {
      result += `${Math.random() > 0.5 ? '嗨！亲爱的小伙伴~' : '感谢亲的光临和评价！'}\n\n`;
    }

    // 感谢评价
    result += `首先，${Math.random() > 0.5 ? '衷心感谢' : '非常感谢'}您对${businessName}的${commentType === '好评' ? '认可和支持' : '关注和反馈'}！${Math.random() > 0.5 ? '您的每一条评价' : '顾客的反馈'}都是我们不断进步的动力。\n\n`;

    // 针对不同评价类型的回复
    if (commentType === '好评') {
      if (rating >= 4.5) {
        result += `${Math.random() > 0.5 ? '看到您对我们的产品和服务如此满意' : '收到您的五星好评'}，我们感到非常${Math.random() > 0.5 ? '开心和自豪' : '荣幸'}！${Math.random() > 0.5 ? '您的认可是对我们最大的鼓励' : '这是对我们团队努力的最好肯定'}。\n\n`;
        result += `${replyStyle === '热情友好' || replyStyle === '幽默风趣' ? '我们会继续保持初心，为您提供更优质的产品和服务！' : '我们将继续努力，为广大顾客提供更优质的产品和服务。'}${replyStyle === '幽默风趣' ? '笔芯~' : ''}\n\n`;
      } else {
        result += `${Math.random() > 0.5 ? '感谢您对我们的认可' : '很高兴您对我们的服务满意'}！${Math.random() > 0.5 ? '我们会继续努力' : '我们会不断改进'}，争取为您提供${Math.random() > 0.5 ? '更完美' : '更优质'}的体验。\n\n`;
      }
    } else if (commentType === '中评') {
      result += `${Math.random() > 0.5 ? '对于您提到的问题' : '看到您的评价'}，我们感到非常抱歉。${Math.random() > 0.5 ? '您的反馈对我们来说非常重要' : '我们非常重视您的意见'}，${Math.random() > 0.5 ? '这让我们意识到还有很多需要改进的地方' : '这将帮助我们不断完善服务'}.\n\n`;
      result += `${replyStyle === '专业诚恳' ? '我们已经将您的问题反馈给相关部门，会尽快进行改进。' : '我们会认真反思并努力改进，希望能给您带来更好的体验。'}${replyStyle === '热情友好' ? '期待您的再次光临，我们一定不会让您失望！' : ''}\n\n`;
    } else if (commentType === '差评') {
      result += `${Math.random() > 0.5 ? '非常抱歉' : '诚挚歉意'}给您带来了不好的体验！${Math.random() > 0.5 ? '您的评价让我们深感愧疚' : '您反映的问题我们高度重视'}，${Math.random() > 0.5 ? '这是我们工作的失误' : '我们对此深表歉意'}。\n\n`;
      result += `${replyStyle === '专业诚恳' ? '为了更好地解决问题，我们的客服人员会尽快与您联系，希望能得到您的理解和支持。' : '我们真诚希望能有机会弥补，您可以通过客服热线或在线客服与我们取得联系，我们会尽力为您解决问题。'}${Math.random() > 0.5 ? '再次向您致以最诚挚的歉意！' : '期待您的谅解！'}\n\n`;
    } else if (commentType === '咨询') {
      result += `${Math.random() > 0.5 ? '感谢您的咨询' : '很高兴为您解答'}！关于您提到的问题，${Math.random() > 0.5 ? '我们的客服人员会尽快与您联系' : '我们将安排专人与您沟通'}，为您提供详细的解答和帮助。${Math.random() > 0.5 ? '如有其他问题' : '如果您还有其他疑问'}，欢迎随时联系我们！\n\n`;
    }

    // 针对具体评价内容的回复
    if (commentContent) {
      // 提取关键词，根据关键词生成更具体的回复
      if (commentContent.includes('物流') || commentContent.includes('快递')) {
        result += `${Math.random() > 0.5 ? '关于物流问题' : '对于快递方面'}，我们一直在努力优化配送流程，${Math.random() > 0.5 ? '争取让您更快收到商品' : '提高配送效率'}。${replyStyle === '专业诚恳' ? '感谢您的理解和支持！' : ''}\n\n`;
      } else if (commentContent.includes('服务') || commentContent.includes('态度')) {
        result += `${Math.random() > 0.5 ? '服务质量是我们一直关注的重点' : '我们非常重视服务体验'}，${Math.random() > 0.5 ? '您的反馈将帮助我们提升服务水平' : '我们会加强员工培训，提升服务质量'}。${replyStyle === '热情友好' ? '期待为您提供更好的服务！' : ''}\n\n`;
      } else if (commentContent.includes('质量') || commentContent.includes('产品')) {
        result += `${Math.random() > 0.5 ? '产品质量是我们的生命线' : '我们一直致力于提供高品质的产品'}，${Math.random() > 0.5 ? '您的评价让我们意识到还有提升空间' : '我们会持续优化产品质量'}。${replyStyle === '专业诚恳' ? '感谢您的宝贵意见！' : ''}\n\n`;
      } else if (commentContent.includes('价格') || commentContent.includes('贵')) {
        result += `${Math.random() > 0.5 ? '关于价格方面' : '对于定价问题'}，我们一直坚持${Math.random() > 0.5 ? '性价比最优' : '品质与价格平衡'}的原则，${Math.random() > 0.5 ? '我们会定期推出优惠活动' : '后续我们会有更多优惠活动'}，敬请关注！${replyStyle === '幽默风趣' ? '悄悄告诉您，可以关注我们的公众号获取最新优惠信息哦~' : ''}\n\n`;
      }
    }

    // 特殊要求
    if (specialRequirements) {
      result += `${Math.random() > 0.5 ? '关于您的特殊要求' : '针对您提到的情况'}，${Math.random() > 0.5 ? '我们已经记录并会尽快处理' : '我们会特别关注并妥善解决'}。${Math.random() > 0.5 ? '如有需要' : '如果您有任何问题'}，请随时联系我们的客服团队！\n\n`;
    }

    // 结尾邀请
    if (replyStyle === '热情友好') {
      result += `${Math.random() > 0.5 ? '期待您的再次光临' : '欢迎您下次再来'}，${businessName}将竭诚为您服务！${Math.random() > 0.5 ? '祝您生活愉快！' : '祝您工作顺利，生活美满！'}\n`;
    } else if (replyStyle === '专业诚恳') {
      result += `${businessName}团队\n${new Date().toLocaleDateString()}\n`;
    } else if (replyStyle === '简洁礼貌') {
      result += `${Math.random() > 0.5 ? '再次感谢您的评价！' : '祝您生活愉快！'}\n${businessName}`;
    } else if (replyStyle === '幽默风趣') {
      result += `${Math.random() > 0.5 ? '咱们江湖再见~' : '期待与您的下次相遇！'}😉\n${businessName}小客服`;
    }

    // 免责声明
    result += `\n\n*本回复由商家官方自动生成，如有特殊需求，请联系客服进行个性化处理。*`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { commentContent, commentType, rating, businessName, replyStyle, specialRequirements } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(commentContent, commentType, rating, businessName, replyStyle, specialRequirements);
      setGeneratedContent(generated);
      message.success('商家回复生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '商家回复.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 评价类型选项
  const commentTypeOptions = [
    { label: '好评', value: '好评' },
    { label: '中评', value: '中评' },
    { label: '差评', value: '差评' },
    { label: '咨询', value: '咨询' },
  ];

  // 回复风格选项
  const replyStyleOptions = [
    { label: '热情友好', value: '热情友好' },
    { label: '专业诚恳', value: '专业诚恳' },
    { label: '简洁礼貌', value: '简洁礼貌' },
    { label: '幽默风趣', value: '幽默风趣' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          商家回复生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              commentType: '好评',
              rating: 5,
              replyStyle: '热情友好',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="businessName"
                  label="商家名称"
                  rules={[{ required: true, message: '请输入商家名称' }]}
                >
                  <div ref={businessNameRef}>
                    <Input placeholder="请输入商家名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="commentType"
                  label="评价类型"
                  rules={[{ required: true, message: '请选择评价类型' }]}
                >
                  <div ref={commentTypeRef}>
                    <Select placeholder="请选择评价类型" options={commentTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="rating"
                  label="评分（针对评价）"
                  rules={[{ required: true, message: '请选择评分' }]}
                >
                  <div ref={ratingRef}>
                    <Rate allowHalf defaultValue={5} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="replyStyle"
                  label="回复风格"
                  rules={[{ required: true, message: '请选择回复风格' }]}
                >
                  <div ref={replyStyleRef}>
                    <Select placeholder="请选择回复风格" options={replyStyleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="commentContent"
                  label="评价内容（可选）"
                >
                  <div ref={commentContentRef}>
                    <TextArea rows={4} placeholder="请输入用户的评价内容，如不填写将根据评价类型自动生成回复" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="specialRequirements"
                  label="特殊要求（可选）"
                >
                  <TextArea rows={2} placeholder="请输入特殊要求，如优惠信息、道歉声明等，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成商家回复'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}